<template>
	<view class="inputAccount">
		<view class="inputComponent">
			<input class="input" :class="{active:active}" type='number' placeholder="请输入账号" @focus="onFocusAccount"
				@blur="onBlur" v-model="user.phoneNumber" />
			<view class="text" v-if="!checkAccount">账号不符合手机号规则</view>
		</view>
		<view class="inputComponent">
			<input class="input" type='number' password placeholder="请输入密码" v-model="user.password" />
		</view>
		<button class="button" type="primary" @click="onLogin"
			:disabled="!(checkAccount && user.password.length)">登陆</button>
		<button class="button" type="default" @click="onVisitor">访客</button>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import { login } from "@/services/sysUserApi";
	import { User } from "@/types/user";

	/**
	 * 登陆
	 */
	let user = ref({                                      // 初始化模版层数据
		phoneNumber: '',
		password: ''
	})
	function onLogin() {                                  // 登陆按钮的点击事件函数
		login(user.value).then(res => {                     // 异步请求同步化
			if (res.code == 200) {
				uni.switchTab({                                 // 登陆成功后的跳转
					url: "/pages/home/home",
				})
			} else if (res.code == 401) {
				uni.navigateTo({                                // 登陆不成功后的跳转
					url: '/pages/login/login'
				})
			}
			uni.showToast({                                   // 弹出结果
				title: res.msg
			})
		})
	}

	/**
	 * 获得焦点的事件函数
	 */
	let active = ref(false)
	function onFocusAccount() {
		active.value = true
	}

	/**
	 * 失去焦点的事件函数:验证手机号规则
	 */
	let checkAccount = ref(true)
	function onBlur(e : any) {
		checkAccount.value = validatePhoneNumber(e.detail.value)
		if (!checkAccount.value) {
			uni.showToast({                                   // 弹出结果
				title: "手机号无效",
				icon: "error"
			})
		}
	}

	/**
	 * 验证手机号的规则
	 * 正则表达式匹配中国大陆手机号
	 */
	function validatePhoneNumber(phoneNumber : string) : boolean {
		const regex = /^1[3-9]\d{9}$/;
		return regex.test(phoneNumber);
	}

	/**
	 * 访客登陆
	 */
	function onVisitor() {                                // 访客登陆按钮的点击事件函数
		uni.showModal({
			title: "是否确认以游客身份登陆",
			content: "只显示默认房间",
			success: function (res) {
				if (res.confirm) {
					user.value = {
						phoneNumber: '13867129833',
						password: '123456'
					}
					onLogin();
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	.inputAccount {
		margin: 50rpx 100rpx; // 外边距,两个参数,上下/左右

		.inputComponent {
			height: 130rpx;

			.input {
				margin: 10rpx 0rpx; // 外边距，两个参数(上下/左右)
				padding: 20rpx 20rpx 20rpx 20rpx; // 内边距（上/右/下/左）
				height: 40rpx;
				box-shadow: 5rpx 5rpx 10rpx rgba(0, 201, 249, 0.6); // 边框阴影(x轴便宜/y轴便宜/模糊半径)
				border: 1rpx solid #ccc; // 边框宽度/颜色
				border-radius: 20rpx; // 圆角
			}

			.text {
				font-size: 22rpx;
				color: #999;
				margin-left: 20rpx;
			}
		}

		.button {
			margin-bottom: 50rpx;
			box-shadow: 5rpx 5rpx 10rpx rgba(0, 201, 249, 0.6); // 边框阴影(x轴便宜/y轴便宜/模糊半径)
			border: 1rpx solid #ccc; // 边框宽度/颜色
			border-radius: 20rpx; // 圆角
		}
	}

	.active {
		background-color: #ffeeee;
	}
</style>